<template>
    <div class="module">
        <div class="moduleTitle">
            <div><i :class="['iconfont',icon]"></i><span>{{title}}</span></div>
        </div>
        <div class="moduleBody">
            <span class="jiao tl"></span>
            <span class="jiao tr"></span>
            <span class="jiao bl"></span>
            <span class="jiao br"></span>
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "module",
        data(){
            return {

            }
        },
        props:['icon','title']
    }

</script>

<style lang="less" scoped>
.module{
    display: flex;
    flex-direction: column;
    .moduleTitle{
        height: 22px;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 5;
        &>div{
            height: 36px;
            line-height: 36px;
            color: #fff;
            border: 1px solid #2047a0;
            background-color: #213d7a;
            padding: 0 28px;
            display: flex;
            align-items: center;
            &>span{
                font-size: 20px;
                padding-left: 14px;
            }
            .iconfont{
                font-size: 26px;
            }
        }
    }
    .moduleBody{
        position: relative;
        flex: 1 0 auto;
        height: 0;
        padding-top: 17px;
        border: 1px solid #2047a0;
        &>.jiao{
            position: absolute;
            width: 27px;
            height: 27px;
            background: url("../images/mjiao.png") no-repeat;
            &.tl{
                left: -10px;
                top: -10px;
            }
            &.tr{
                right: -10px;
                top: -10px;
                transform: rotateY(180deg);
            }
            &.bl{
                 left: -10px;
                 bottom: -10px;
                 transform: rotateX(180deg);
             }
            &.br{
                bottom: -10px;
                right: -10px;
                transform: rotate(180deg);
            }
        }

    }
}
</style>
